<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>面板</title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			.header {
				height: 50px;
				width: 100%;
				background-color: #998162;
				padding: 4px;
				position: fixed;
				top: 0px;
				display: none;
			}
			
			.header .avtor {
				float: left;
				border-radius: 21px;
				margin-left: 10px;
				width: 42px;
				height: 42px;
				border: 1px solid #cccc;
				background-image: url(img/2014.jpg);
				background-size: cover;
			}
			
			.header .avtor img {
				width: 42px;
			}
			
			.footer {
				position: fixed;
				bottom: 0px;
				height: 42px;
				width: 100%;
				border-top: 1px solid #CCCCCC;
			}
			
			.footer {
				display: none;
			}
			
			.footer>div {
				float: left;
				width: calc(100%/3);
				text-align: center;
				line-height: 42px;
			}
			
			.footer a {
				text-decoration: none;
				color: blueviolet;
			}
			
			#NowMessage:target,
			#Friends:target,
			#mySetting:target {
				display: block;
				color: #333;
			}
			
			.ShowMain {
				padding-top: 50px;
				padding-bottom: 42px;
			}
			
			.ShowMain>div:nth-child(-n+3) {
				display: none;
			}
			
			#showname {}
			
			.Message {
				width: 100%;
				height: 50px;
				border: 1px solid;
			}
			
			.MessageAvator {
				float: left;
				width: 50px;
				height: 50px;
			}
			
			.MessageAvator>img {
				width: 50px;
			}
			
			.MessageName {
				margin-top: 20px;
			}
			
			#addf,
			#jieshou {
				width: 100%;
				height: 100px;
				padding: 20px;
				border: 1px solid;
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				margin: auto;
				display: none;
			}
			
			#chatroom {
				position: absolute;
				background-color: whitesmoke;
				top: 50px;
				width: 100%;
				height: 90%;
				border: 1px solid;
			}
			
			.liaotianspan {
				position: absolute;
				width: 100%;
				height: 80%;
			}
			
			.sendspan {
				position: absolute;
				width: 100%;
				height: 20%;
				bottom: 0px;
			}
			
			.sendspan>textarea {
				float: left;
				width: 80%;
				height: 100%;
			}
			
			.sendspan>input {
				width: 20%;
				height: 100%;
			}
			
			.chatcontent {
				border: 1px solid;
				max-width: 70%;
				margin-left: 42px;
			}
			
			.chatavator {
				width: 42px;
				height: 42px;
				float: left;
			}
			
			.chatavator>img {
				width: 100%;
			}
			
			.liaotianspan {
				padding: 10px;
			}
			
			.liaotianspan>p {
				margin: 10px 0px;
			}
			
			.fr {
				float: right;
			}
			
			.hisname {
				background-color: bisque;
				text-align: center;
			}
			
			#fanhui {
				font-size: 17px;
				float: left;
				cursor: pointer;
			}
			.LoginMain{
				background-color: whitesmoke;
				border: 4px solid #CCCCCC;
				width: 300px;
				height: 200px;
				border-radius: 5px;
				box-shadow: 2px 3px 2px 2px #333333;
				position: absolute;left:39%;top: 20%;
				margin-right: 150px;
			}
			.LoginMain #username,
			.LoginMain #password{
				/*width: 100px;*/
				height: 30px;
				width: 200px;
			}
			.LoginMain p{
				font-size: 14px;
				text-indent: 2em;
				margin-top: 18px;
			}
			.LoginMain #login{
				width: 80px;
				height: 30px;
				background-color: blue;
				border-radius: 5px ;
				border: 1px solid #00008B;
				outline: none;
				cursor: pointer;
				color: white;
				position:relative ;left:100px;
			}
		</style>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jmessage-sdk-web-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="header">
			<div class="avtor">
			</div>
			<span id="showname">
				未登陆
			</span>
			<a id="dengchu" href="#" onclick="loginOut()">登出</a>
			<i class="iconfont icon-addpeople" onclick="addF()" style="float: right;"></i>
		</div>
		<div class="ShowMain">
			<div class="mianban" id="NowMessage">
				<!--<div class="Message">
					<span class="MessageAvator">
						<img src="img/avtor.jpg"/>
					</span>
					<span class="MessageName"></span>
				</div>-->
			</div>
			<div class="mianban" id="Friends">
			</div>
			<div class="mianban" id="mySetting">
				mySetting
			</div>
			<div class="LoginMain">
				<p>用户：<input type="text" name="username" id="username" value="" placeholder="邮箱/用户名" /></p>
				<p>密码：<input type="password" name="password" id="password" value="" placeholder="密码" /></p>
				<p><input type="button" name="login" id="login" value="登陆" onclick="mylogin()" /></p>
				<p>
					<a href="#">忘记密码</a>
					<a href="register.html" style="float: right;margin-right: 20px;">新用户注册</a>
				</p>
			</div>
			<div id="chatroom">
				<!--<div id="chat0">
					<div class="hisname">
						<span onclick="fanhui()" id="fanhui" class="iconfont icon-back">
							返回
						</span><span>zhangsan</span>
					</div>
					<div class="liaotianspan">
						<p>
							<div class="chatavator">
								<img src="img/avtor.jpg" />
							</div>
							<div class="chatcontent">
								今天天气真不错今天天气真不错 今天天气真不错今天天气真不错今天天气真不错
							</div>
						</p>
						<p>
							<div class="chatavator fr">
								<img src="img/avtor.jpg" />
							</div>
							<div class="chatcontent fr">
								今天天气真不错今天天气真不错 今天天气真不错今天天气真不错今天天气真不错
							</div>
						</p>
					</div>
					<div class="sendspan">
						<textarea id="" name="" rows="" cols=""></textarea><input type="button" name="" id="" value="发送" />
					</div>
				</div>-->
			</div>
			<div id="addf">
				<p>好友名字：<input id="addfriendname" type="text" name="" id="" value="" /></p>
				<p>邀请说明：<input id="addInfo" type="text" name="" id="" value="" /></p>
				<p><input type="button" name="" id="" value="确认" onclick="addFriend()" /></p>
			</div>
			<div id="jieshou">
				<p>有一个朋友加你</p>
				<p>好友名字：<input id="jsfriendname" type="text" name="" id="" value="" /></p>
				<p>邀请说明：<input id="jsInfo" type="text" name="" id="" value="" /></p>
				<p><input type="button" name="" id="" value="同意" onclick="reseachFriends()" /><input type="button" name="" id="" value="拒绝" onclick="reseachFriends(1)" /></p>
			</div>
		</div>
		<div class="footer">
			<div id="NowM">
				<a href="#NowMessage" class="iconfont icon-information"></a>
			</div>
			<div id="Fri">
				<a href="#Friends" class="iconfont icon-person"></a>
			</div>
			<div id="myS">
				<a href="#mySetting" class="iconfont icon-set"></a>
			</div>
		</div>
		<script type="text/javascript">
			var JIM = new JMessage({
				debug: true
			});
			window.onload = function() {
				$("#chatroom").hide()
				var date = new Date();
				var temestamp = date.getTime();
				var signature = hex_md5("appkey=a8d92f0404cda9a6d302424d&timestamp=" + temestamp + "&random_str=022cd9fd995849b58b3ef0e943421ed9&key=121cf0054d845eb5bbd8a69b")
				JIM.init({
					"appkey": "a8d92f0404cda9a6d302424d",
					"random_str": "022cd9fd995849b58b3ef0e943421ed9",
					"signature": signature,
					"timestamp": temestamp
				}).onSuccess(function(data) {
					//do something
					console.log(data)
				}).onFail(function(data) {
					// do something
					console.log(data);
				});
				//判断当前是否有登陆用户
				if(!JIM.current_user) {
					$(".LoginMain").show();
					$(".footer").hide();
					$("#dengchu").hide();
				} else {
					$(".LoginMain").hide();
					$(".footer").show();
					JIM.getUserInfo({
						'username': JIM.current_user
					}).onSuccess(function(data) {
						console.log('success:' + JSON.stringify(data));
					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					});
				}
			}

			function fanhui() {
				$("#chat0").hide();
				$("#chatroom").hide();
			}

			//发送信息
			function sendSingleMsg() {
				JIM.sendSingleMsg({
					'target_username': across_user,
					'target_nickname': target_nickname,
					'content': 'Hi, JiGuang',
					'appkey': across_appkey
				}).onSuccess(function(data) {
					console.log('success:' + JSON.stringify(data));
					appendToDashboard('success: ' + JSON.stringify(data));
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
					appendToDashboard('error: ' + JSON.stringify(data));
				});
			}
			//退出
			function loginOut() {
				JIM.loginOut();
				$("#showname").html("");
				//退出之后，重新进行初始化
				var date = new Date();
				var temestamp = date.getTime();
				var signature = hex_md5("appkey=a8d92f0404cda9a6d302424d&timestamp=" + temestamp + "&random_str=022cd9fd995849b58b3ef0e943421ed9&key=121cf0054d845eb5bbd8a69b")
				JIM.init({
					"appkey": "a8d92f0404cda9a6d302424d",
					"random_str": "022cd9fd995849b58b3ef0e943421ed9",
					"signature": signature,
					"timestamp": temestamp
				}).onSuccess(function(data) {
					//do something
					console.log(data)
				}).onFail(function(data) {
					// do something
					console.log(data);
				});

				if(!JIM.current_user) {
					$(".LoginMain").show();
					$(".footer").hide();
				} else {
					$(".LoginMain").hide();
					$(".footer").show();
					JIM.getUserInfo({
						'username': JIM.current_user
					}).onSuccess(function(data) {
						console.log('success:' + JSON.stringify(data));
					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					});
				}
			}

			function createRoom(a,name) {
				var chatname = "#chat" + a;
				$("#chatroom").show();
				$(".footer").hide();
				if(!$(chatname).html()) {
					//创建这个聊天室
					var str = "<div id="+chatname+">";
					str+= '<div class="hisname"><span onclick="fanhui()" id="fanhui" class="iconfont icon-back">返回</span><span>'+name+'</span></div>';				
					str+='<div class="liaotianspan"></div>';
					str+='<div class="sendspan"><textarea id="" name="" rows="" cols=""></textarea><input type="button" name="" id="" value="发送" /></div>'
					str+="</div>"
					$("#chatroom").html(str);
					console.log("添加聊天室")
				} else {
					//如有有了此聊天室，则进行隐藏，而不再创建聊天室
					console.log("隐藏")
				}
			}
			//登陆
			function mylogin() {
				JIM.login({
					'username': $("#username").val(),
					'password': $("#password").val()
				}).onSuccess(function(data) {
					$(".LoginMain").hide();
					$(".footer").show();
					//登陆成功后获取好友列表
					$("#dengchu").show();
					$(".header").show();
					JIM.getFriendList().onSuccess(function(data) {
						console.log("成功获取用户列表" + data);
						console.log(data);
						updateFriendList(data.friend_list);
					}).onFail(function(data) {
						console.log("失败获取用户列表" + data);
					}); 

					//登陆面板信息清空
					$("#username").val(""),
						$("#password").val("")
						//获取当前登陆用户信息
					$("#showname").html(JIM.current_user);

					//					$(".Message")
					JIM.onMsgReceive(function(data) {
						console.log(data);
					});
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
				}).onTimeout(function(data) {
					console.log('timeout:' + JSON.stringify(data));
				});
			}
			//添加好友

			function addF() {
				if(!JIM.current_user) {
					alert("请先登陆再添加好友")
				} else {
					$("#addf").show();
				}
			}
			//发送添加好友邀请
			function addFriend() {
				JIM.addFriend({
					'appkey': "a8d92f0404cda9a6d302424d",
					'target_name': $("#addfriendname").val(),
					'from_type': '1',
					'why': $("#addInfo").val()
				}).onSuccess(function(data) {
					console.log('发送好友请求成功:' + JSON.stringify(data));
					$("#addf").hide();
				}).onFail(function(data) {
					console.log("添加失败");
					console.log('发送好友请求失败' + JSON.stringify(data));
				});
			}
			//接受信息事件监听
			JIM.onEventNotification(function(data) {
				//						ttname=JSON.stringify(data)
				console.log(data);
				if(data.event_type == 5 && data.extra == 2) {
					JIM.getFriendList().onSuccess(function(data) {
						console.log("成功获取用户列表" + data);
						console.log(data);
						updateFriendList(data.friend_list);
					}).onFail(function(data) {
						console.log("失败获取用户列表" + data);
						console.log('error:' + JSON.stringify(data));
					});
				}
				if(data.from_username != "" && data.extra == 1) {
					$('#jieshou').show();
					ttname = data.from_username
					$('#jsfriendname').val(ttname);
					$("#jsInfo").val(data.description);
				}
			});
			//获取好友列表
			function getFriendList() {
				JIM.getFriendList().onSuccess(function(data) {
					console.log("成功获取用户列表" + data);
					console.log(data);
				}).onFail(function(data) {
					console.log("失败获取用户列表" + data);
					console.log('error:' + JSON.stringify(data));
				});
			}
			var ttname; //这个人加你好友
			//接受好友添加请求
			function reseachFriends(why) {
				JIM.addFriend({
					'target_name': ttname,
					'from_type': '2',
					'why': why,
					'appkey': 'a8d92f0404cda9a6d302424d'
				}).onSuccess(function(data) {
					// do something
					console.log(data);
					console.log(username + "添加成功")
					JIM.getFriendList().onSuccess(function(data) {
						console.log("成功获取用户列表" + data);
						console.log(data);
						updateFriendList(data.friend_list);
					}).onFail(function(data) {
						console.log("失败获取用户列表" + data);
						console.log('error:' + JSON.stringify(data));
					});
				}).onFail(function(data) {
					// do something 
				});
				$('#jieshou').hide();
			}
 
			function updateFriendList(friend) {
				var str = "";
				for(var i = 0; i < friend.length; i++) {
					var c = friend[i].username+"";
//					str += "<div class='Message' onclick='"+"createRoom("+i+",+"'"+c+"'"+")'><span class='MessageAvator'><img src='img/avtor.jpg'/></span><span class='MessageName'>" + friend[i].username + "</span></div>";
					str += "<div class='Message' onclick='"
					str+="createRoom("
					str+=i;
					str+=',"';
					str+=c+'"';
					str+=")'><span class='MessageAvator'><img src='img/avtor.jpg'/></span><span class='MessageName'>" + friend[i].username + "</span></div>";
				}
				$("#Friends").html(str);
			}
		</script>
	</body>

</html>